<!--这个组件是用来封装左边菜单的部分-->
<template>
    <el-aside width="220px" class="sidebar">
        <div class="logo">
            <i class="fas fa-database"></i>
            <span style="margin-left:5px">通用后台管理平台</span>
        </div>
        <el-menu :default-active="activeMenu" class="el-menu-vertical" background-color="#304156" text-color="#fff"
            active-text-color="#ffd04b" :unique-opened="true" router>
            <el-menu-item index="/home" @click="addTab('首页', '/home')">
                <el-icon>
                    <HomeFilled />
                </el-icon>
                <span>首页</span>
            </el-menu-item>
            <navItem v-for="menu in menuList" :key="menu.path" :menu="menu" />
        </el-menu>
    </el-aside>
</template>

<script setup>
import { ref, watch, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { useTabsStore } from '@/store/tabs'
//import { service } from '@/common/axios/apiRequest.js'
import navItem from '@/components/navigation/navItem.vue'

const route = useRoute()
const tabsStore = useTabsStore()
const activeMenu = ref(route.path)

//页面控件挂载完成后获取菜单数据
onMounted(async () => {
    // await service.get('api/User').then(res => {
    // })
});

const menuList = ref([
    {
        menuName: "用户管理",
        path: "/user",
        icon: "User",
        childs: [
            { menuName: "用户列表", path: "/user/list", icon: "setting" }
        ]
    },
    {
        menuName: "权限管理",
        path: "/permission",
        icon: "Lock",
        childs: [
            { menuName: "权限列表", path: "/permission/list", icon: "User" }
        ]
    }
])

// 添加Tab（通过Pinia传递）
const addTab = (title, path) => {
    tabsStore.addTab(title, path)
}

// 监听路由变化
watch(route, (newRoute) => {
    activeMenu.value = newRoute.path
}, { immediate: true })
</script>

<style scoped>
.sidebar {
    background-color: #304156;
    color: #fff;
}

.logo {
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: bold;
    color: #fff;
    background-color: #2b2f3a;
}

.el-menu-vertical {
    border-right: none;
    height: calc(100% - 60px);
}
</style>